<nz-table
  nzSize="small"
  [nzData]="[{}]"
  nzShowSizeChanger
  nzShowPagination="false"
  [nzFrontPagination]="false"
>
  <thead>
  <tr>
    <th nzAlign="center">序号</th>
    <th nzAlign="center">抽奖场次</th>
    <th nzAlign="center">奖品名称</th>
    <th nzAlign="center">奖品简称</th>
    <th nzAlign="center">奖品图片</th>
    <th nzAlign="center">奖品类型</th>
    <th nzAlign="center">奖品数量</th>
    <th nzAlign="center">奖品剩余数量</th>
    <th nzAlign="center">奖品价值</th>
    <th nzAlign="center">解锁条件</th>
    <th nzAlign="center">中奖数值（每个场次之和为10000）</th>
    <th nzAlign="center">更新时间</th>
    <th nzAlign="center">操作</th>
  </tr>
  </thead>
  <tbody>
  <!--初级场-->
  <tr *ngFor="let l of firstGamePrizeList;let index=index;">
    <td nzAlign="center">{{ l['sort'] }}</td>
    <td nzAlign="center" [attr.typeColor]="l['groupType']">{{ GROUPTYPE[l['groupType']] }}</td>
    <td nzAlign="center">{{ l['name'] }}</td>
    <td nzAlign="center">{{ l['shortName'] }}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        [nzSrc]="l['img']"
      />
    </td>
    <td nzAlign="center">{{ TYPE[l['type']] }}</td>
    <td nzAlign="center">{{ l['stock'] === 0 ? '不限制' : l['stock'] }}</td>
    <td nzAlign="center">{{ l['stock'] === 0 ? '不限制' : l['stock'] - l['exchange'] }}</td>
    <td nzAlign="center">{{ l['value']}}</td>
    <td nzAlign="center">{{ l['limitIntegral'] || '无限制' }}{{ l['unlockDescribe'] }}</td>
    <td nzAlign="center">{{ l['probability']}}</td>
    <td nzAlign="center">{{ l['updateTime']}}</td>
    <td nzAlign="center">
      <a *ngIf="index!==0" (click)="move(l['id'],1)">上移</a>
      <a *ngIf="index+1!==firstGamePrizeList.length" (click)="move(l['id'],0)">下移</a>
      <a (click)="showModal(l)">编辑</a>
    </td>
  </tr>
  <!--中级场-->
  <tr *ngFor="let l of middleGamePrizeList;let index=index;">
    <td nzAlign="center">{{ l['sort'] }}</td>
    <td nzAlign="center" [attr.typeColor]="l['groupType']">{{ GROUPTYPE[l['groupType']] }}</td>
    <td nzAlign="center">{{ l['name'] }}</td>
    <td nzAlign="center">{{ l['shortName'] }}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        [nzSrc]="l['img']"
      />
    </td>
    <td nzAlign="center">{{ TYPE[l['type']] }}</td>
    <td nzAlign="center">{{ l['stock'] === 0 ? '不限制' : l['stock'] }}</td>
    <td nzAlign="center">{{ l['stock'] === 0 ? '不限制' : l['stock'] - l['exchange'] }}</td>
    <td nzAlign="center">{{ l['value']}}</td>
    <td nzAlign="center">{{ l['limitIntegral'] || '无限制' }}{{ l['unlockDescribe'] }}</td>
    <td nzAlign="center">{{ l['probability']}}</td>
    <td nzAlign="center">{{ l['updateTime']}}</td>
    <td nzAlign="center">
      <a *ngIf="index!==0" (click)="move(l['id'],1)">上移</a>
      <a *ngIf="index+1!==middleGamePrizeList.length" (click)="move(l['id'],0)">下移</a>
      <a (click)="showModal(l)">编辑</a>
    </td>
  </tr>
  <!--高级场-->
  <tr *ngFor="let l of highGamePrizeList;let index=index;">
    <td nzAlign="center">{{ l['sort'] }}</td>
    <td nzAlign="center" [attr.typeColor]="l['groupType']">{{ GROUPTYPE[l['groupType']] }}</td>
    <td nzAlign="center">{{ l['name'] }}</td>
    <td nzAlign="center">{{ l['shortName'] }}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        [nzSrc]="l['img']"
      />
    </td>
    <td nzAlign="center">{{ TYPE[l['type']] }}</td>
    <td nzAlign="center">{{ l['stock'] === 0 ? '不限制' : l['stock'] }}</td>
    <td nzAlign="center">{{ l['stock'] === 0 ? '不限制' : l['stock'] - l['exchange'] }}</td>
    <td nzAlign="center">{{ l['value']}}</td>
    <td nzAlign="center">{{ l['limitIntegral'] || '无限制' }}{{ l['unlockDescribe'] }}</td>
    <td nzAlign="center">{{ l['probability']}}</td>
    <td nzAlign="center">{{ l['updateTime']}}</td>
    <td nzAlign="center">
      <a *ngIf="index!==0" (click)="move(l['id'],1)">上移</a>
      <a *ngIf="index+1!==highGamePrizeList.length" (click)="move(l['id'],0)">下移</a>
      <a (click)="showModal(l)">编辑</a>
    </td>
  </tr>

  </tbody>
</nz-table>


<nz-modal
  [(nzVisible)]="editCommonModal.visible"
  nzTitle="编辑奖品"
  nzWidth="800px"
  (nzOnCancel)="hideModal()">
  <div *nzModalContent>
    <div class="rowItem">
      <label class="label"><span>*</span>奖品名称</label>
      <input nz-input placeholder="请输入奖品名称" [(ngModel)]="editCommonModal.name"/>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>奖品简称</label>
      <input nz-input placeholder="请输入奖品简称" [(ngModel)]="editCommonModal.shortName"/>
    </div>
    <div class="rowItem">
      <label class="label" style="vertical-align: top"><span>*</span>图片</label>
      <app-image-upload style="width: 250px;display: inline-block"
                        [maxImgLength]="1"
                        [imageUrl]="editCommonModal.img"
                        (deleteImg)="editCommonModal.img=''"
                        (urlChange)="editCommonModal.img=$event"></app-image-upload>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>奖品类型</label>
      <nz-select [(ngModel)]="editCommonModal.type" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
        <nz-option [nzValue]="1" nzLabel="积分"></nz-option>
        <nz-option [nzValue]="2" nzLabel="点豆"></nz-option>
        <nz-option [nzValue]="3" nzLabel="实物"></nz-option>
      </nz-select>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>奖品数量</label>
      <label nz-checkbox [(ngModel)]="editCommonModal.stock.status" (ngModelChange)="stockLockChange()">不限制</label>
      <span style="margin-left: 8px">限制</span>
      <input nz-input placeholder="奖品数量" style="width: 100px" [min]="1" [disabled]="editCommonModal.stock.status"
             [(ngModel)]="editCommonModal.stock.num"/>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>解锁条件</label>
<!--      <label nz-checkbox [(ngModel)]="editCommonModal.limitIntegral.status" (ngModelChange)="lockChange()">无需解锁</label>-->

<!--      <nz-input-group nzAddOnBefore="每满" nzAddOnAfter="积分解锁1个" style="width: 280px">-->
<!--        <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"-->
<!--                         [(ngModel)]="componentData.heightPercent"></nz-input-number>-->
<!--      </nz-input-group>-->
<!--      <nz-input-group nzAddOnBefore="满" nzAddOnAfter="积分解锁全部" style="width: 280px">-->
<!--        <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="1" [nzMax]="9999999" [nzPrecision]="0"-->
<!--                         [(ngModel)]="componentData.heightPercent"></nz-input-number>-->
<!--      </nz-input-group>-->

      <nz-radio-group [(ngModel)]="editCommonModal.limitIntegral.type" (ngModelChange)="lockChange()">
        <label nz-radio [nzValue]="0">无需解锁</label>
        <label nz-radio [nzValue]="2">
          每满<span style="margin-right: 0" *ngIf="editCommonModal.limitIntegral.type!==2">()</span>
          <nz-input-number nzPlaceHolder="请输入" style="width: 120px" [nzMin]="1" [nzMax]="9999999" *ngIf="editCommonModal.limitIntegral.type===2"
                           [nzPrecision]="0" [(ngModel)]="editCommonModal.limitIntegral.num"
          ></nz-input-number>积分解锁1个
<!--          <nz-input-group nzAddOnBefore="每满" nzAddOnAfter="积分解锁1个" style="width: 220px">-->
<!--        <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="1" [nzMax]="9999999" [disabled]="editCommonModal.limitIntegral.type!==2"-->
<!--                         [nzPrecision]="0" [(ngModel)]="editCommonModal.limitIntegral.num"-->
<!--                         ></nz-input-number>-->
<!--      </nz-input-group>-->
        </label>
        <label nz-radio [nzValue]="1">
          满<span style="margin-right: 0" *ngIf="editCommonModal.limitIntegral.type!==1">()</span>
          <nz-input-number nzPlaceHolder="请输入" style="width: 120px" [nzMin]="1" [nzMax]="9999999" *ngIf="editCommonModal.limitIntegral.type===1"
                           [nzPrecision]="0" [(ngModel)]="editCommonModal.limitIntegral.num"
          ></nz-input-number>积分解锁全部
<!--          <nz-input-group nzAddOnBefore="满" nzAddOnAfter="积分解锁全部" style="width: 220px">-->
<!--        <nz-input-number nzPlaceHolder="请输入" style="width: 100%" [nzMin]="1" [nzMax]="9999999" *ngIf="editCommonModal.limitIntegral.type===1"-->
<!--                         [nzPrecision]="0" [(ngModel)]="editCommonModal.limitIntegral.num"-->
<!--                         ></nz-input-number>-->
<!--      </nz-input-group>-->
        </label>
      </nz-radio-group>

<!--      <span style="margin-left: 8px">满</span>-->
<!--      <input nz-input placeholder="积分" style="width: 100px" [min]="1" [disabled]="editCommonModal.limitIntegral.status"-->
<!--             [(ngModel)]="editCommonModal.limitIntegral.num"/>-->
<!--      积分解锁-->
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>奖品价值</label>
      <input nz-input placeholder="价值" style="width: 100px" [min]="0" [(ngModel)]="editCommonModal.value"/>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>中奖数值</label>
      <input nz-input placeholder="数值" style="width: 100px" [min]="0" [max]="10000" [(ngModel)]="editCommonModal.probability"/>
      中奖率：数值/10000
    </div>
    <!--    <div class="rowItem">-->
    <!--      <label class="label"><span>*</span>状态</label>-->
    <!--      <nz-radio-group [(ngModel)]="editCommonModal.type">-->
    <!--        <label nz-radio [nzValue]="0">启用</label>-->
    <!--        <label nz-radio [nzValue]="1">禁用</label>-->
    <!--      </nz-radio-group>-->
    <!--    </div>-->
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideModal()">取消</button>
    <button nz-button nzType="primary" (click)="saveEditModal()">确认</button>
  </div>
</nz-modal>

<nz-modal
  [(nzVisible)]="editThanksModal.visible"
  nzWidth="400px"
  nzTitle="编辑谢谢惠顾"
  (nzOnCancel)="hideModal()">
  <div *nzModalContent>
    <div class="rowItem">
      <label class="label" style="vertical-align: top"><span>*</span>图片</label>
      <app-image-upload style="width: 250px;display: inline-block"
                        [maxImgLength]="1"
                        [imageUrl]="editThanksModal.img"
                        (deleteImg)="editThanksModal.img=''"
                        (urlChange)="editThanksModal.img=$event"></app-image-upload>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideModal()">取消</button>
    <button nz-button nzType="primary" (click)="saveEditThanksModal()">确认</button>
  </div>
</nz-modal>
